//-------------------------------------------------------------------------------------------------
// author zhangwei on 2015.08.10
// modified by zhangwei on 2015.08.10
// - Released ver v1. This version is the clone from: https://github.com/TahaSh/Tasks-App-With-VueJS
//   And there's a good article about it: http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different 
// modified by zhangwei on 2015.08.10
// - Released ver 2. This is a readonly list.
//
// Reference
// - http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different 
//-------------------------------------------------------------------------------------------------

// TODO on 2015.08.23
// - Uses vue-resource to fetch data from the backend or jQuery ajax to communicate with backend service.
// - Suggest use the standard code pattern in vue grid/table examples. 
//   Better encapsulate the table as a component.

function _find(pagenum, pagesteps){
	var data = [];
	for (var i=0; i<pagesteps; i++)
	{
		data.push({
            rowid: i, 
			selected: (i % 2 == 0), 
			timestamp: '2015.07.08Z23:12:56:324:313', 
			node: '3213121', 
			frame: '56 7F 2A 3D', 
			title: 'Go to grocery store' + i, 
			completed: false
 		});
	}
	return data;
};

function find(vm, inputQuery, pagenumber, pagesteps){
    setTimeout(function (){
		var data =  _find(pagenumber, pagesteps);
		var tmplen = vm.items.length;
		for (var i=0; i<pagesteps; i++)
		{
			data[i].rowid = tmplen + i;
			//vm.items.push(data[i]);
		}
		vm.$set('items', data);
    }, 100)
};

var vm = new Vue({
    el: '#app',
	
	data: {
		begintime: '',
		endtime: '',
		remotedevice: '',
		searchQuery: '',
		
        items: [
            { rowid: 3, selected: true, timestamp: '2015.07.08Z23:12:56:324:313', node: '3213121', frame: '56 7F 2A 3D', title: 'Go to grocery store', completed: false },
            { rowid: 4, selected: false, timestamp: '2015.07.08Z23:12:56:325:313', node: '3213121', frame: '56 7F 2A 3D', title: 'Go to grocery store', completed: false },
            { rowid: 5, selected: true, timestamp: '2015.07.08Z23:12:56:327:313', node: '3213123', frame: '56 7F 2A 3D', title: 'Go to grocery store', completed: false },
        ],
		
		tempselected: true,
    },
	
	methods: {
		search: function(e){
			console.log("search button");
			console.log(e.target.tagName); // "BUTTON"
			console.log(e.targetVM === this); // true
			var inputs = new Array();
			inputs[0] = "{begintime:'";
			inputs[1] = this.begintime;
			inputs[2] = "', endtime:'";
			inputs[3] = this.endtime;
			inputs[4] = "', remotedevice:'";
			inputs[5] = this.remotedevice;
			inputs[6] = "', searchQuery:'";
			inputs[7] = this.searchQuery;
			inputs[8] = "'}";
			inputQuery = inputs.join('');
			console.log("your input query condition is " + inputQuery);
			find(this, inputQuery, 1, 6);
		},
		
		/*
        clearData : function (){
			console.log("clear button");
            var myTable = VueUI.getComponent('myTable')
            VueUI.resetArray(tableConf.data, [])
            //tableConf.data = []
            //tableConf.data = []
            //myTable.data = []
            myTable.totalPage = 0
            myTable.totalCount = 0
        }
		*/
		
		// Deleted selected records according to the selected property of each item.
		removeSelected: function(e){
			console.log("removeSelected: " + e);
			console.log(this.items);
		}

		//sortBy: function (key) {
		//	this.sortKey = key
		//	this.reversed[key] = !this.reversed[key]
	},
	
	ready: function(){
		console.log("ready function is called");
		// @tutorial call find/fetch here to load initial data.
		//find(this, '', 1, 6);
	}
});


